<template>
  <div>
    <div class="head">
      <div class="input">
        <span>账户名称：</span>
        <el-input v-model="queryData.project_name" placeholder="请输入账户名称" />
      </div>
      <div class="input">
        <span>类型：</span>
        <el-select v-model="queryData.type_id" placeholder="请选择">
          <el-option v-for="(item, index) in discloseTypeList" :key="index" :label="item.type_name" :value="item.id">{{
            item.type_name
          }}</el-option>
        </el-select>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增</el-button>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        border
        row-key="id"
        ref="tableData"
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
         <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column
          prop="company_name"
          fixed
          show-overflow-tooltip
          align="center"
          label="账号"
          min-width="160"
        />
        <el-table-column
          prop="create_time"
          show-overflow-tooltip
          align="center"
          label="创建时间"
          min-width="140"
        />
       
        <el-table-column prop="project_progress_status" align="center" label="状态" width="100">
          <template #default="scope">
            <span>
              {{ scope.row.project_progress_status_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="240">
          <template #default="scope">
            <div class="action">
              <!-- <span @click="edit(scope.row,1)">编辑</span> -->
              <span @click="delOk(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 5px; text-align: right"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="ruleForm.id ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleColose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        style="width: 100%"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
     
       
        <div class="flex">
          <el-form-item label="账号" prop="company_name" style="width: 100%; margin-left: 30px">
            <el-input v-model="ruleForm.company_name" placeholder="请输入账号"></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="密码" prop="password" style="width: 100%; margin-left: 30px">
            <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="确认密码" prop="password1" style="width: 100%; margin-left: 30px">
            <el-input v-model="ruleForm.password1" placeholder="请输入确认密码"></el-input>
          </el-form-item>
        </div>
         <div class="flex">
           <el-form-item label="组织架构" prop="pids" style="width: 100%; margin-left: 30px">
          <el-cascader
            v-model="ruleForm.pids"
            placeholder="请选择"
            :options="selectList"
            :props="{ checkStrictly: true, value: 'id', label: 'department_name' }"
            clearable
            style="width: 460px"
          ></el-cascader>
          <!-- <el-select style="width: 590px" v-model="ruleForm.pid" placeholder="请选择">
            <el-option label="组织架构" :value="1">组织架构</el-option>
          </el-select> -->
        </el-form-item>
        </div>

        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleColose">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图片列表弹窗 -->
    <el-dialog title="图片列表" :visible.sync="imageListVisible" width="1200px" :close-on-click-modal="false">
      <div class="image-list-container">
        <div v-if="imageListData.length === 0" class="no-data">暂无图片数据</div>
        <div v-else class="image-grid">
          <div v-for="(item, index) in imageListData" :key="index" class="image-item">
            <div class="image-header">
              <span class="staff-name">{{ item.staff_name }}</span>
              <span class="upload-time">{{ item.upload_time }}</span>
            </div>
            <div class="images-container">
              <el-image
                v-for="(imgUrl, imgIndex) in item.img_urls"
                :key="imgIndex"
                :src="imgUrl"
                class="image-thumbnail"
                :preview-src-list="item.img_urls"
                alt="交底图片"
              ></el-image>
            </div>
            <div v-if="item.content" class="image-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <el-pagination
        v-if="imageListTotal > 0"
        background
        style="margin-top: 20px; text-align: center"
        @size-change="handleImageListSizeChange"
        @current-change="handleImageListCurrentChange"
        :current-page.sync="imageListQuery.page"
        :page-size.sync="imageListQuery.size"
        layout="total, prev, pager, next, sizes, jumper"
        :total="imageListTotal"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imageListVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { UserPage, DepartmentList, UserSave, UserDel, DiscloseNullify, DiscloseRecordList } from '@/api/manage';
import E from 'wangeditor';
export default {
  name: 'disclose',
  data() {
    return {
      tableHeight: 500,
      queryData: {
        project_name: '',
        type_id: '',
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      tableData2: [],
      dialogVisible: false,
      ruleForm: {
        type:1,
        sign_type: 1,
        type_id: undefined,
        project_name: undefined,
        construction_name: undefined,
        supervision_name: undefined,
        build_name: undefined,
        overview: undefined,
        risk: undefined,
        content: undefined,
        remark: undefined,
        staff_id: undefined,
        other_staff_ids: [],
        disclose_time: undefined,
      },
      rules: {
        type: [{ required: true, message: '请选择交底方式', trigger: 'change' }],
        sign_type: [{ required: true, message: '请选择签名方式', trigger: 'change' }],
        type_id: [{ required: true, message: '请选择交底类型', trigger: 'change' }],
        project_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        construction_name: [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
        supervision_name: [{ required: true, message: '请输入监理单位', trigger: 'blur' }],
        build_name: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
        overview: [{ required: true, message: '请输入工程概况', trigger: 'blur' }],
        risk: [{ required: true, message: '请输入现场风险', trigger: 'blur' }],
        content: [{ required: true, message: '请输入交底内容', trigger: 'change' }],
        staff_id: [{ required: true, message: '请选择交底人', trigger: 'change' }],
        other_staff_ids: [{ required: true, message: '请选择被交底人', trigger: 'change' }],
        disclose_time: [{ required: true, message: '请选择交底时间', trigger: 'change' }],
      },
      editorOption: {},
      isShowAdd: false,
      discloseTypeList: [],
      staffArr: [],
      imageListVisible: false,
      imageListData: [],
      imageListTotal: 0,
      imageListQuery: {
        page: 1,
        size: 10,
      },
    };
  },
  computed: {},
  created() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getDiscloseTypes();
    this.getStaffList();
  },
  mounted() {
    this.getSelectList();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.project_name = '';
      this.queryData.type_id = '';
      this.search();
    },
    addOk() {
      this.isShowAdd = false;
    },
    add() {
      this.dialogVisible = true;
      this.ruleForm = {
        type:1,
        sign_type: 1,
        type_id: undefined,
        project_name: undefined,
        construction_name: undefined,
        supervision_name: undefined,
        build_name: undefined,
        overview: undefined,
        risk: undefined,
        content: undefined,
        remark: undefined,
        staff_id: undefined,
        other_staff_ids: [],
        disclose_time: undefined,
      };
      this.$nextTick(() => {
        this.init();
      });
    },delOk(item) {
      this.$confirm('确定删除账号马?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        UserDel({
          id: item.id,
        }).then((res) => {
          this.$message.success('删除成功');
          this.dialogVisible = false;
          this.getList();
          this.item = null;
        });
      });
    },
    edit(item) {
        this.ruleForm  = JSON.parse(JSON.stringify(item));
        this.isShowAdd = true;
    },
    ullify(item) {
      this.$confirm('确定作废该交底?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        DiscloseNullify({
          id: item.id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '作废成功',
          });
          this.getList();
        });
      });
    },
    details(item) {
      this.$router.push({
        path: '/company/discloseDetails/index',
        query: {
          id: item.id,
        },
      });
    },
    handleColose() {
      this.ruleForm = {
        type:1,
        sign_type: 1,
        type_id: undefined,
        project_name: undefined,
        construction_name: undefined,
        supervision_name: undefined,
        build_name: undefined,
        overview: undefined,
        risk: undefined,
        content: undefined,
        remark: undefined,
        staff_id: undefined,
        other_staff_ids: [],
        disclose_time: undefined,
      };
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            UserSave(this.ruleForm).then((res) => {
              this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
              this.handleColose();
              this.getList();
            });
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    getList() {
      this.isTableLoading = true;
      UserPage(this.queryData).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.isTableLoading = false;
      });
    },
     getSelectList() {
      DepartmentList().then((res) => {
        this.selectList = [{ id: 0,  children: res.data.list }];
      });
    },
    getDiscloseTypes() {
      DiscloseTypes().then((res) => {
        this.discloseTypeList = res.data.list;
      });
    },
    getStaffList() {
      StaffAllStaffs().then((res) => {
        this.staffArr = res.data.list;
      });
    },
    init() {
      if (this.phoneEditor) return;
      this.phoneEditor = new E('#editorContainer');
      // 上传图片到服务器，base64形式
      this.phoneEditor.config.excludeMenus = ['video', 'code'];
      this.phoneEditor.config.uploadImgShowBase64 = true;
      // // 隐藏网络图片
      this.phoneEditor.config.showLinkImg = false;

      this.phoneEditor.config.debug = true;
      //图片上传接口
      this.phoneEditor.config.uploadImgServer = ''; // 上传图片的接口地址
      this.phoneEditor.config.uploadFileName = 'image'; // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
      this.phoneEditor.config.uploadImgHeaders = {
        token: sessionStorage.getItem('token'), // 设置请求头
      };
      this.phoneEditor.config.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          console.log('成功', result);
        },
      };
      // 创建一个富文本编辑器
      this.phoneEditor.create();
      // 修改的时候，需要富文本内容回显，则需要加入以下代码
      if (this.ruleForm.id) {
        this.phoneEditor.txt.html(this.ruleForm.content);
      }

      this.phoneEditor.config.onchange = (html) => {
        this.ruleForm.content = html; // 绑定当前逐渐地值
        // this.$emit('change', this.info_); // 将内容同步到父组件中
      };
    },
    showImageList(item) {
      this.imageListVisible = true;
      this.imageListQuery.disclose_id = item.id;
      this.imageListQuery.page = 1;
      this.getImageList();
    },
    handleImageListSizeChange(size) {
      this.imageListQuery.size = size;
      this.getImageList();
    },
    handleImageListCurrentChange(page) {
      this.imageListQuery.page = page;
      this.getImageList();
    },
    getImageList() {
      DiscloseRecordList(this.imageListQuery).then((res) => {
        this.imageListData = res.data.list;
        this.imageListTotal = res.data.total;
      }).catch((error) => {
        this.$message.error('获取图片列表失败');
        console.error(error);
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.flex {
  width: 100%;
  display: flex;
  align-items: center;
}
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}
#editorContainer /deep/ .w-e-text-container {
  height: 300px !important;
}
.image-list-container {
  max-height: 600px;
  overflow-y: auto;
}
.no-data {
  text-align: center;
  color: #909399;
  padding: 40px;
  font-size: 14px;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}
.image-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 15px;
  background: #fafafa;
}
.image-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}
.staff-name {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}
.upload-time {
  font-size: 12px;
  color: #909399;
}
.images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.image-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}
.image-content {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}
</style>
